<template>
  <view class="personal-center">
    <!-- 顶部蓝色导航栏（与个人信息页完全一致） -->
    <view class="nav-bar">
    </view>

    <!-- 用户信息区域（在蓝色导航栏上方显示） -->
    <view class="user-info">
      <image class="avatar" src="https://picsum.photos/200/200" mode="widthFix"></image>
      <view class="user-name">张先生</view>
      <view class="user-phone">18602564789</view>
      <!-- 添加token状态检查按钮 -->
      <view class="token-check" @click="checkTokenStatus">
        <text class="token-text">🔑 检查登录状态</text>
      </view>
    </view>

    <!-- 内容卡片容器（与个人信息页info-card布局一致） -->
    <view class="content-card">
      <!-- 我的优惠券 -->
      <view class="coupon-box" @click="goToMyCoupons">
        <view class="coupon-left">
          <image class="coupon-icon" src="https://picsum.photos/40/40?random=1" mode="widthFix"></image>
          <text class="coupon-text">我的优惠券</text>
        </view>
        <view class="coupon-right">
          <text class="coupon-count">3张</text>
        </view>
      </view>

      <!-- 我的订单 -->
      <view class="order-box">
        <view class="order-title">
          <text class="order-text">我的订单</text>
          <text class="order-all">全部订单</text>
        </view>
        <view class="order-status">
          <view class="status-item" v-for="(item, index) in statusList" :key="index">
            <image class="status-icon" :src="item.icon" mode="widthFix"></image>
            <text class="status-text">{{item.text}}</text>
          </view>
        </view>
      </view>

      <!-- 我的服务 -->
      <view class="service-box">
        <view class="service-title">我的服务</view>
        <view class="service-list">
          <view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="goToService(item.path)">
            <image class="service-icon" :src="item.icon" mode="widthFix"></image>
            <text class="service-text">{{item.text}}</text>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-btn" @click="logout">退出登录</view>
    </view>

    <!-- 底部TabBar -->
    <view class="tabbar">
      <view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(index)">
        <image class="tabbar-icon" :src="item.icon" mode="widthFix"></image>
        <text class="tabbar-text" :style="{color: currentTab === index ? '#3399ff' : '#666'}">{{item.text}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { isLoggedIn, logout } from '../../utils/auth.js'; // 使用你队友的auth.js

export default {
  data() {
    return {
      statusList: [
        { icon: "https://picsum.photos/60/60?random=3", text: "待支付" },
        { icon: "https://picsum.photos/60/60?random=4", text: "待使用" },
        { icon: "https://picsum.photos/60/60?random=5", text: "待评价" }
      ],
      serviceList: [
        { icon: "https://picsum.photos/60/60?random=6", text: "领券中心", path: "/pages/Coupon/CouponCenter" },
        { icon: "https://picsum.photos/60/60?random=7", text: "邀请好友" },
        { icon: "https://picsum.photos/60/60?random=8", text: "我的车辆" },
        { icon: "https://picsum.photos/60/60?random=9", text: "消费记录", path: "/pages/Consumption/ConsumptionRecord" },
        { icon: "https://picsum.photos/60/60?random=10", text: "我的维修" },
        { icon: "https://picsum.photos/60/60?random=11", text: "意见反馈" },
        { icon: "https://picsum.photos/60/60?random=12", text: "收货地址" }
      ],
      tabbarList: [
        { icon: "https://picsum.photos/40/40?random=13", text: "首页" },
        { icon: "https://picsum.photos/40/40?random=14", text: "服务" },
        { icon: "https://picsum.photos/40/40?random=15", text: "我的" }
      ],
      currentTab: 2 // 当前选中的Tab，对应"我的"
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    goToMyCoupons() {
      uni.navigateTo({
        url: '/pages/Coupon/MyCoupons'
      });
    },
    goToService(path) {
      if (path) {
        uni.navigateTo({
          url: path
        });
      }
    },
    // 检查token状态
    checkTokenStatus() {
      const token = uni.getStorageSync('access_token');
      const userInfo = uni.getStorageSync('user_info');
      
      const status = {
        hasToken: !!token,
        tokenLength: token ? token.length : 0,
        tokenPreview: token ? token.substring(0, 20) + '...' : '无token',
        hasUserInfo: !!userInfo,
        userInfo: userInfo || '无用户信息',
        isLoggedIn: isLoggedIn()
      };
      
      console.log('📊 Token状态详情:', status);
      
      // 显示在界面上
      uni.showModal({
        title: 'Token状态',
        content: JSON.stringify(status, null, 2),
        showCancel: false
      });
      
      return status;
    },
    // 退出登录
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 使用你队友的auth.js退出登录
            logout();
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
page {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* 个人中心容器 */
.personal-center {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: 120rpx; /* 为底部tabbar预留空间 */
  position: relative; /* 为绝对定位元素提供参考 */
}

/* 顶部蓝色导航栏（与个人信息页完全一致） */
.nav-bar {
  position: absolute;
  background-color: #3399ff; /* 统一蓝色背景 */
  height: 300rpx; /* 相同高度 */
  width: 100%;
  z-index: 2; /* 相同层级 */
}

/* 用户信息区域（在蓝色导航栏上显示） */
.user-info {
  position: absolute;
  top: 80rpx; /* 调整在导航栏中的位置 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3; /* 确保在导航栏上方 */
  top: 0px;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #fff;
}
.user-name {
  font-size: 32rpx;
  color: #fff;
  margin-top: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}
.user-phone {
  font-size: 28rpx;
  color: #fff;
  margin-top: 10rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

/* Token检查按钮 */
.token-check {
  margin-top: 20rpx;
  padding: 10rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 0.2s;
}

.token-check:active {
  background-color: rgba(255, 255, 255, 0.3);
}

.token-text {
  font-size: 24rpx;
  color: #fff;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.3);
}

/* 内容卡片容器（与个人信息页info-card布局一致） */
.content-card {
  position: absolute;
  width: 90%;
  height: auto;
  background-color: white;
  border-radius: 20rpx; /* 统一圆角 */
  margin: 100rpx 5% 0 5%; /* 相同margin */
  z-index: 3; /* 相同层级 */
  padding: 30rpx;
  box-sizing: border-box;
  top: 160rpx; /* 调整位置在导航栏下方 */
}

/* 我的优惠券 */
.coupon-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.coupon-left {
  display: flex;
  align-items: center;
}
.coupon-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}
.coupon-text {
  font-size: 28rpx;
  color: #333;
}
.coupon-right {
  display: flex;
  align-items: center;
}
.coupon-count {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

/* 我的订单 */
.order-box {
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.order-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.order-text {
  font-size: 28rpx;
  color: #333;
}
.order-all {
  font-size: 26rpx;
  color: #3399ff; /* 改为主题蓝色 */
}
.order-status {
  display: flex;
  justify-content: space-around;
}
.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.status-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}
.status-text {
  font-size: 24rpx;
  color: #666;
}

/* 我的服务 */
.service-box {
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 30rpx;
}
.service-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.service-list {
  display: flex;
  flex-wrap: wrap;
}
.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}
.service-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}
.service-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

/* 退出登录（使用主题色） */
.logout-btn {
  background-color: #d9d9d9; /* 统一蓝色按钮 */
  text-align: center;
  padding: 25rpx;
  border-radius: 100rpx;
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 80px;
}

/* 底部TabBar */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #f5f5f5;
  z-index: 999;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabbar-icon {
  width: 40rpx;
  height: 40rpx;
}
.tabbar-text {
  font-size: 24rpx;
  margin-top: 10rpx;
}
</style>